<template>
  <!-- <div> -->
  <div class="userInfo" >
    <div class="head">
      <div class="iconfont icon-meum"></div>
      <div class="content">个人中心</div>
      <router-link
        tag="div"
        class="iconfont icon-sousuo"
        to="/base/search"
      ></router-link>
    </div>

    <div class="top" v-show="uInfo">
      <van-image round width="8rem" height="8rem" :src="uInfo.avatarUrl" />
      <h2>
        {{ uInfo.nickname || "请登录" }}
      </h2>
    </div>

    <div class="userContent">
      <ul class="mes">
        <li>
          <div
            class="iconfont icon-play"
            @click="$router.push('/userInfo/recPlayed')"
          ></div>
          <p>最近播放</p>
        </li>

        <li>
          <div
            class="iconfont icon-24gf-musicAlbum"
            @click="$router.push('/userInfo/localDownload')"
          ></div>
          <p>本地/下载</p>
        </li>

        <li>
          <div
            class="iconfont icon-shangchuanyunpan"
            @click="$router.push('/userInfo/cloudDisk')"
          ></div>
          <p>云盘</p>
        </li>

        <li>
          <div
            class="iconfont icon-yigou1"
            @click="$router.push('/userInfo/purchased')"
          ></div>
          <p>已购</p>
        </li>

        <li>
          <div
            class="iconfont icon-haoyou"
            @click="$router.push('/attention')"
          ></div>
          <p>我的好友</p>
        </li>

        <li>
          <div
            class="iconfont icon-shoucang"
            @click="$router.push('/userInfo/collection')"
          ></div>
          <p>收藏和赞</p>
        </li>

        <li>
          <div
            class="iconfont icon-mayi-diantai"
            @click="$router.push('/userInfo/studio')"
          ></div>
          <p>广播电台</p>
        </li>

        <li>
          <div
            class="iconfont icon-shipin"
            @click="$router.push('/userInfo/podcast')"
          ></div>
          <p>我的播客</p>
        </li>
      </ul>
    </div>

    <van-tabs v-model="active" class="toggle">
      <van-tab title="创建歌单">
        <div class="listMenu">
          <ul>
            <h3>创建歌单({{ sNum.createdPlaylistCount }}个)</h3>

            <li
              v-for="(item, index) in list"
              :key="item.id"
              v-show="index < sNum.createdPlaylistCount"
              @click="$router.push('/userInfo/singList?id=' + item.id)"
            >
              <div class="img">
                <img :src="item.coverImgUrl" alt="" />
              </div>

              <div class="like">
                <h3>{{ item.name }}</h3>
                <span>{{ item.trackCount || "n" }}首</span>
              </div>
            </li>
          </ul>
        </div>
      </van-tab>

      <van-tab title="收藏歌单">
        <div class="likeMenu">
          <ul>
            <h3>收藏歌单({{ sNum.subPlaylistCount }}个)</h3>

            <li
              v-for="(item, index) in list"
              :key="item.id"
              v-show="index >= sNum.createdPlaylistCount"
               @click="$router.push('/userInfo/singList?id=' + item.id)"
            >
              <div class="img">
                <img :src="item.coverImgUrl" alt="" />
              </div>

              <div class="like">
                <h3>
                  {{ item.name }}
                </h3>
                <span>{{ item.trackCount || "n" }}首</span>
              </div>
            </li>
          </ul>
        </div>
      </van-tab>
    </van-tabs>
  </div>
  <!-- </div> -->
</template>

<script>
import { getMyself, getNumMes, getMyselfList } from "../api/myself";

export default {
  props: ["uid"],
  data() {
    return {
      active: 0,
      uInfo: {
        avatarUrl: null,
      },
      sNum: {
        createdPlaylistCount: null,
        subPlaylistCount: null,
      },
      list: null,
    };
  },
  methods: {
    getMyselfFun() {
      getMyself({ uid: this.uid }).then((data) => {
        console.log(data);
        this.uInfo = data.profile;
      });
    },
    getNumMesFun() {
      getNumMes().then((data) => {
        console.log(data);
        this.sNum = data;
      });
    },
    getMyselfListFun() {
      getMyselfList({ uid: this.uid }).then((data) => {
        console.log(data);
        this.list = data.playlist;
      });
    },
  },
  created() {
    this.getNumMesFun();
    this.getMyselfFun();
    this.getMyselfListFun();
    this.$emit("getnavs-btn", true);
  },
};
</script>

<style lang="less">
.userInfo {
  width: 100%;
  height: 100%;
  padding-bottom: 100px;
  .head {
    display: flex;
    justify-content: space-between;
    padding: 5px;
    background-color: #d44439;
    color: #fff;
    .content {
      flex: 1;
      text-align: center;
      font-size: 20px;
      line-height: 30px;
    }
    .iconfont {
      flex: 0 0 40px;
      text-align: center;
      padding: 5px 0;
      font-size: 25px;
    }
  }
  .top {
    width: 100%;
    min-height: 50px;
    text-align: center;
    padding: 15px 0;
    h2 {
      margin-top: 8px;
    }
  }
  .userContent {
    width: 100%;
    min-height: 50px;
    padding: 10px;
    box-sizing: border-box;
    .mes {
      width: 100%;
      min-height: 50px;
      display: flex;
      flex-wrap: wrap;
      padding: 10px;
      box-sizing: border-box;
      li {
        width: 25%;
        text-align: center;
        padding-bottom: 10px;
        .iconfont {
          font-size: 30px;
          color: red;
        }
        p {
          color: #333;
          padding-top: 8px;
        }
      }
    }
  }

  .listMenu,
  .likeMenu {
    ul {
      padding: 15px;
      h3 {
        font-size: 14px;
        color: #666;
        padding: 10px 0;
      }
      li {
        display: flex;
        padding-bottom: 10px;
        .img {
          flex: 0 0 40px;
          width: 80px;
          height: 80px;
          border-radius: 10px;
          padding-right: 10px;
          img {
            width: 80px;
            height: 80px;
            border-radius: 10px;
          }
        }
        .like {
          flex: 1;
          padding: 20px 0;
          h3 {
            padding: 0;
            font-size: 16px;
            color: #333;
            // 1、固定宽度（高度可有可无）：width: 195px;
            // 2、把盒子转成弹性伸缩盒子：
            display: -webkit-box;
            // 3、弹性盒子排列方式：垂直排列：
            -webkit-box-orient: vertical;
            // 4、规定显示几行文本：
            -webkit-line-clamp: 1;
            // 5、溢出隐藏：
            overflow: hidden;
          }
          span {
            font-size: 12px;
            color: #aaa;
          }
        }
      }
    }
  }
}
</style>